<template>
<div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="80px">
      <!--添加门店-->
      <div class="common-form">{{$t('store.add_store')}}</div>

      <el-form-item
        :label="$t('store.store_name')"
        prop="storeName"
        :rules="[{  required: true,  message: ' '}]"
      >
        <el-input
          v-model="form.storeName"
          :placeholder="$t('store.enter_store_name')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('store.store_logo')">
        <el-row>
          <el-button icon="Picture" @click="openUpload">{{$t('store.choose_image')}}</el-button>
          <div v-if="form.logoImageId != ''" class="img">
            <img :src="filePath" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
      <el-form-item
        :label="$t('store.contact')"
        prop="linkman"
        :rules="[{  required: true,  message: ' '}]"
      >
        <el-input
          v-model="form.linkman"
          :placeholder="$t('store.enter_store_contact')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('store.contact_phone')"
        prop="phone"
        :rules="[{  required: true,  message: ' '}]"
      >
        <el-input
          v-model="form.phone"
          :placeholder="$t('store.enter_store_phone')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('store.business_hours')"
        prop="shopHours"
        :rules="[{  required: true,  message: ' '}]"
      >
        <el-input
          v-model="form.shopHours"
          :placeholder="$t('store.enter_business_hours')"
          class="max-w460"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('store.store_area')">
        <el-select
          v-model="form.provinceId"
          :placeholder="$t('store.province_label')"
          @change="initCity"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in areaList"
            :key="index"
          ></el-option>
        </el-select>
        <el-select
          v-if="form.provinceId != ''"
          v-model="form.cityId"
          :placeholder="$t('store.city_label')"
          @change="initRegion"
        >
          <el-option
            :label="item1.name"
            :value="item1.id"
            v-for="(item1, index1) in cityList"
            :key="index1"
          ></el-option>
        </el-select>
        <el-select
          v-if="form.cityId != ''"
          v-model="form.regionId"
          :placeholder="$t('store.district_label')"
        >
          <el-option
            :label="item2.name"
            :value="item2.id"
            v-for="(item2, index2) in regionList"
            :key="index2"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="$t('store.address_detail')"
        prop="address"
        :rules="[{  required: true,  message: ' '}]"
      >
        <el-input
          v-model="form.address"
          :placeholder="$t('store.enter_address_detail')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('store.store_coordinates')"
        props="coordinate"
        :rules="[{  required: true,  message: ' '}]"
      >
        <el-row class="mb16">
          <el-col :span="24">
            <el-input v-model="form.coordinate" class="max-w460"></el-input>
          </el-col>
        </el-row>
        <el-row class="mb16">
          <el-col :span="24">
            <Getpoint
              :form="form"
              @getMapdata="getMapdataFunc"
              @chose="choseFunc"
            ></Getpoint>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('store.store_description')">
        <el-input
          type="textarea"
          v-model="form.summary"
          :placeholder="$t('store.enter_store_description')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('store.store_order')">
        <el-input
          type="number"
          v-model="form.sort"
          :placeholder="$t('store.enter_store_order')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('store.self_pickup_verification')">
        <el-radio-group v-model="form.isCheck">
          <el-radio :label="1">{{$t('store.support')}}</el-radio>
          <el-radio :label="0">{{$t('store.not_support')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('store.store_status')">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">{{$t('store.enable')}}</el-radio>
          <el-radio :label="0">{{$t('store.disable')}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">{{$t('store.cancel_clerk')}}</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >{{$t('store.submit')}}</el-button
        >
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >{{$t('store.upload_image_store')}}</Upload
    >
  </div>
</template>

<script>
import Getpoint from "@/components/map/Getpoint.vue";
import StoreApi from "@/api/store.js";
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    /*腾讯地图拾取器*/
    Getpoint,
    Upload
  },
  data() {
    return {
      /*切换菜单*/
      // activeIndex: '1',
      /*form表单数据*/
      form: {
        storeName: "",
        logoImageId: "",
        linkman: "",
        phone: "",
        shopHours: "",
        provinceId: "",
        cityId: "",
        regionId: "",
        address: "",
        coordinate: "",
        summary: "",
        sort: 1,
        isCheck: 1,
        status: 1,
        isSearchMap: false
      },
      filePath: "",
      /*省市区*/
      areaList: [],
      cityList: [],
      regionList: [],
      /*是否上传图片*/
      isupload: false,
      loading: false
    };
  },
  created() {
    /*引用的select_region 初始化*/
    this.getData();
  },
  watch: {
    "form.provinceId": function (n, o) {
      if (n != o) {
        this.areaList.forEach((item, index) => {
          if (item.id == n) {
            this.cityList = item.children;
          }
        });
      }
    },
    "form.cityId": function (n, o) {
      if (n != o) {
        this.cityList.forEach((item, index) => {
          if (item.id == n) {
            console.log(item);
            this.regionList = item.children;
          }
        });
      }
    }
  },
  methods: {
    getData() {
      let self = this;
      StoreApi.toAddShop({}, true).then(res => {
        self.areaList = res.data;
      }).catch(error => {});
    },
    /*添加用户*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          StoreApi.addShop(form, true).then(data => {
            self.loading = false;
            if (data.code == 1) {
              ElMessage({
                message: $t("store.add_success"),
                type: "success"
              });
              self.$router.push("/store/store/index");
            } else {
              self.loading = false;
            }
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    },
    /*初始化城市id*/
    initCity() {
      this.form.cityId = "";
    },
    /*初始化区id*/
    initRegion() {
      this.form.regionId = "";
    },
    /*获取经纬度*/
    getMapdataFunc(e) {
      this.form.coordinate = e.data[0].toFixed(6) + "," + e.data[1].toFixed(6);
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.filePath = e[0].filePath;
        this.form.logoImageId = e[0].fileId;
      }
      this.isupload = false;
    },
    /*选择的地址*/
    choseFunc(e) {
      this.form.coordinate = e.location.lat + "," + e.location.lng;
      this.form.address = e.address;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>

